<template>
  <div class="page-container">
    <h2 class="page-title">销量排行</h2>
    <el-table :data="list" border class="table">
      <el-table-column prop="rank" label="排名" width="80" />
      <el-table-column prop="name" label="商品" />
      <el-table-column prop="sales" label="销量" width="120" />
      <el-table-column prop="price" label="价格" width="120" />
    </el-table>
  </div>
</template>
<script setup>
const list = [
  { rank: 1, name: '宁北 X1 智能手机', sales: 1200, price: 2999 },
  { rank: 2, name: '宁北 Air14 轻薄本', sales: 800, price: 4599 },
  { rank: 3, name: '宁北 跑鞋', sales: 600, price: 259 }
]
</script>
<style scoped>
.page-container { max-width: 900px; margin: 0 auto; padding: var(--spacing-xl); }
.page-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-lg); }
.table { background: var(--bg-white); }
</style>